<template>
  <div class="myDialog">
    <el-dialog :visible.sync="visible" @close="closeDialog" customClass="customPadding">
      <div slot="title" style="font-size: 18px;color:#2d2d2d;text-align: center">
        课堂排序(拖动课堂可以调整课堂卡片的顺序)
      </div>
      <draggable v-model="myCourse" @update="dataDragEnd" :options="{animation:500}">
        <transition-group>
          <div v-for="item in myCourse" :key="item.id" class="drag-item">
            <i class="el-icon-star-on icon-color"></i>
            {{ item.courseName }}
          </div>
        </transition-group>
      </draggable>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelSort">取 消</el-button>
        <el-button type="primary" @click="submitSort">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import draggable from 'vuedraggable'
import {mymessage} from "../tools/mymessage";

export default {
  name: "CourseSort",
  components: {
    draggable
  },
  props: {
    sortCardVisible: Boolean,
    courses: {
      type: Array
    }
  },
  data() {
    return {
      visible: false,
      myCourse: [],
      rankedCourses: [],
      resData: {
        courseId: -1,
        userId: -1,
        sort: -1
      }
    }
  },
  watch: {
    sortCardVisible(newValue, oldValue) {
      this.visible = newValue
    },
    courses(newValue, oldValue) {
      this.myCourse = newValue
    }
  },
  methods: {
    closeDialog() {
      this.$emit('close', false)
    },
    dataDragEnd(evt) {
      evt.preventDefault();
      for (let i = 0; i < this.myCourse.length; i++) {
        this.myCourse[i].rank = i;
      }

      var userId = this.$store.getters.userInfo.id
      for (let i = this.myCourse.length - 1; i >= 0; i--) {
        this.resData = {}
        this.resData.sort = i
        this.resData.courseId = this.myCourse[i].id
        this.resData.userId = userId
        // console.log(this.myCourse[i].id + " " + this.resData.sort);
        // console.log(this.resData);
        this.rankedCourses.push(this.resData)
      }
    },
    submitSort() {
      this.$confirm('是否确认排序?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (this.rankedCourses.length > 0) {
          this.postRequest('/course/updateRankCourse', this.rankedCourses).then(resp => {
            console.log("resp", resp);
            if (resp.code === 200) {
              this.visible = false
              this.$emit('function', 'sort')
            }
          })
        }
        this.visible = false
        this.$emit('function', 'sort')
      }).catch(() => {
        this.visible = false
        this.resData = {}
        this.myCourse = []
        this.$emit('function', 'sort')
        mymessage.info('取消排序')
      });
    },
    cancelSort() {
      this.visible = false
      this.resData = {}
      this.myCourse = []
      this.$emit('function', 'sort')
      mymessage.info('取消排序')
    }
  },
  created() {
    this.visible = this.sortCardVisible
    this.myCourse = this.courses
  }
}
</script>

<style scoped>
.drag-item {
  padding-left: 30px;
  width: 100%;
  height: 60px;
  font-size: 16px;
  color: #2d2d2d;
  line-height: 60px;
  border: 1px solid #eeeeee;
}

.ghostClass {
  opacity: 0;
}

.bottom {
  width: 100%;
  height: 50px;
  transition: all .5s linear;
}

.chosenClass {
  border: 1px solid #1890ff;
  cursor: pointer;
}

.icon-color {
  color: #1890ff;
  margin-right: 10px;
}
</style>

<style>
.myDialog .el-dialog__body {
  padding: 0;
  overflow-x: hidden;
}
</style>
